<template>
    <div class="dialog" v-if="show">
       <div class="title">
            <span>{{title}}</span>
            <i @click="show=false" class="el-icon-close"></i>
        </div>
        <slot></slot>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
		props:['dialogWH', 'title'],
        data () {
            return {
                show:false
			}
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
.dialog {
	width: 100%;
	height: 100%;
    background-image: linear-gradient(to bottom right,#223241,#081522);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	border-radius: 5px*@ratio;
	transition: opacity 0.8s;
	.title {
		border-top-left-radius: 5px*@ratio;
		border-top-right-radius: 5px*@ratio;
		width: 100%;
		height: 26px*@ratio;
		color: #ffffff;
		font-size: 18px*@ratio;
		background: #00b0f9;
		align-items: center;
		display: flex;
		padding: 0 10px*@ratio;
		span { flex: 1; }
	}
}
</style>
